<template>
    <van-pull-refresh v-model="isLoading" success-text="刷新成功" @refresh="onRefresh">
        <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" offset="1">
            <div class="box">
                <div class="tip">
                    <div class="tag">公告</div>
                    <div class="content">
                        <van-swipe style="height: 50px;" :autoplay="1500" :show-indicators="false" vertical>
                            <van-swipe-item v-for="(i, index) in bannerList" :key="index">
                                <slot name="default">
                                    <div class="msg">
                                        <i>{{ i.nickname }}</i><i>参加了</i><i>{{ i.name }}</i>
                                    </div>
                                </slot>
                            </van-swipe-item>
                        </van-swipe>
                    </div>
                </div>
                <div class="content">
                    <h2>热门活动上线中</h2>
                    <div class="item" v-for="item in activityList" :key="item.id">
                        <img :src="item.image">
                        <div class="msg">
                            <div class="left">
                                <p class="title"><span class="tag">{{ item.time_text }}</span>{{ item.name }}</p>
                            </div>
                            <span class="check">立即参加</span>
                        </div>
                    </div>
                    <div class="item" v-for="item in endList" :key="item.id">
                        <div class="img-box">
                            <img :src="item.image">
                        </div>
                        <div class="msg">
                            <div class="left">
                                <p class="title"><span class="tag end">{{ item.time_text }}</span>{{ item.name }}</p>
                            </div>
                            <span class="check">查看详情</span>
                        </div>
                    </div>
                </div>
            </div>
        </van-list>
    </van-pull-refresh>
</template>

<script lang="ts" setup>
import { getActivityListAPI } from '@/api/api'
import { reactive, ref } from "vue";
defineOptions({
    name: 'Activity',
})
const activityList: any = reactive([])
const endList: any = reactive([])
const bannerList: any = reactive([])
let offset = 10
let limit = 10
let index = 0
const loading = ref(false);
const finished = ref(false);
const isLoading = ref(false);
//下拉刷新
const onRefresh = () => {
    //将数据清空
    activityList.splice(0, activityList.length)
    endList.splice(0, endList.length)
    bannerList.splice(0, bannerList.length)
    onLoad()
    isLoading.value = false;
};
//上拉加载更多
const onLoad = async () => {
    const { data: { data } } = await getActivityListAPI(offset * index, limit)
    bannerList.push(...data.banner)
    activityList.push(...data.ongoing.events)
    endList.push(...data.ended.events)
    loading.value = false;
    // 数据全部加载完成
    if (data.ended.length === 0) {
        finished.value = true;
    }
    index++
}
</script>

<style scoped lang="scss">
.box {
    padding: 10px;
    overflow: hidden;
}

.tip {
    border-radius: 7px;
    padding: 0 10px;
    font-size: 16px;
    height: 50px;
    background-color: #e8e8e8;
    display: flex;
    align-items: center;
    overflow: hidden;

    .tag {
        flex-shrink: 0;
        font-weight: bold;
        background-color: gold;
        height: 26px;
        line-height: 26px;
        border-radius: 0 7px;
        color: #000;
        padding: 0 2px;
        margin-right: 10px;
    }

    .content {
        height: 100%;
        flex: 1;
    }

    .msg {
        line-height: 50px;
        display: flex;

        i {
            color: #000;
            font-weight: bold;
            font-style: normal;
            max-width: 30%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;

            &:nth-child(2) {
                color: #666;
                margin: 0 5px;
                font-weight: normal;
            }
        }
    }
}

.content {
    font-size: 16px;

    .item {
        margin-bottom: 20px;

        img {
            width: 100%;
        }

        .msg {
            display: flex;
            align-items: center;
            justify-content: space-between;
            color: #333;
            font-weight: bold;
            .title{
                width: 280px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
            .tag {
                background-color: gold;
                color: #000;
                padding: 3px 5px;
                border-radius: 0 10px;
                margin-right: 10px;
                &.end {
                    background-color: #ccc;
                    color: #fff;
                }
            }

            span {
                flex-shrink: 0;
            }

            .check {
                color: #479496;

                &::after {
                    content: '';
                    display: inline-block;
                    width: 10px;
                    height: 10px;
                    border-top: 2px solid #479496;
                    border-right: 2px solid #479496;
                    transform: rotate(45deg);
                    margin-right: 5px;
                }
            }
        }
    }

}</style>